<template>
    <div :class="!iserror? 'app-content' :''" id="app" >
        <div  v-if="!iserror">
        <nav-bar :title="'合作'"/>
        <div>
            <div class="charge-title">您的联系方式：<img src="../../assets/star.png" width="5px" height="5px"></div>
            <cube-select class="pay-input w-40_ display-inline-block" v-model="appealData.contact_type"
                         :options="contactType">
            </cube-select>
            <cube-input class="pay-input w-40_ display-inline-block" v-model="appealData.contact_account" >
            </cube-input>
            <div  v-if="errorMessage.contact_type" > <p  class="errorMessage" v-show='errorMessage.contact_type'>请选择联系方式</p></div>
            <div v-else > <p  class="errorMessage" v-show='errorMessage.contact_account'>请填写联系方式</p></div>
            <div class="charge-title">您拥有的资源：<img src="../../assets/star.png" width="5px" height="5px"> </div>
            <cube-textarea v-model="appealData.source_desc"  placeholder="请详细描述您拥有的资源、广告位，用户性质等" class="pay-textarea"  :maxlength="1000"></cube-textarea>

            <div> <p style="margin: 5px 5% 0px; color: red; font-size: 12px;"  v-show='errorMessage.source_desc'>请填写您拥有的资源</p></div>
            <div> <p class="errorMessage"  v-show='exa.source_desc'>您拥有的资源不得少于10字</p></div>

            <div class="charge-title">之前是否有棋牌推广经验：<img src="../../assets/star.png" width="5px" height="5px"></div>
            <cube-select class="pay-input w-65_" v-model="appealData.is_veteran"
                         :options="istrue">
            </cube-select>
            <div> <p  class="errorMessage"  v-show='errorMessage.is_veteran'>请选择之前是否有棋牌推广经验</p></div>


            <div class="charge-title">当前是否拥有下级团队：<img src="../../assets/star.png" width="5px" height="5px"></div>
            <cube-select class="pay-input w-65_" v-model="appealData.with_lower"
                         :options="istrue">
            </cube-select>
            <div> <p  class="errorMessage"  v-show='errorMessage.with_lower'>请选择当前是否拥有下级团队</p></div>

            <div class="charge-title">下级团队人数：<img src="../../assets/star.png" width="5px" height="5px"></div>
            <cube-select class="pay-input w-65_" v-model="appealData.lower_count"
                         :options="proSubordinateTeamNum">
            </cube-select>
            <div> <p  class="errorMessage"  v-show='errorMessage.lower_count'>请选择下级团队人数</p></div>

            <div class="charge-title">预计每天可带来多少新用户：<img src="../../assets/star.png" width="5px" height="5px"></div>
            <cube-select class="pay-input w-65_" v-model="appealData.daily_new"
                         :options="propNewUser">
            </cube-select>
            <div> <p  class="errorMessage"  v-show='errorMessage.daily_new'>预计每天可带来多少新用户</p></div>

            <div class="submit">
                <div>请确保以上信息填写无误，处理速度更快哦，<br><br>
                    结果请在<span class="color-Gold">客服</span>-><span class="color-Gold">反馈记录</span>中查看哟</div>
                <cube-button class="subbutton" @click="submitWorkOrder" :disabled="showLoading?true:false" >提交</cube-button>
            </div>

        </div>

            <div v-show='showLoading' class="showLoading"  >
                <cube-loading class="loading-div" :size="40"  ></cube-loading>
                <div class="loadingtext"  >{{loadingMsg}}</div>
            </div>
        </div>
        <error-page v-if="iserror" :iserror.sync="iserror"></error-page>
    </div>
</template>

<script>
    import {Cell, Button, DatetimePicker, Field, Popup, Uploader, Swipe, SwipeItem} from 'vant'
    import NavBar from '@/components/customerService/NavBar.vue'
    import {submitWorkOrder} from '@/api/customerService'
    import error from '@/pages/error/App.vue'
    import {dataNullFilter,dataDescLengthFilter} from '@/utils/ckData'
    import mixins from '@/model/mixins'


    export default {
        mixins: [mixins],
        components: {
            NavBar,
            'error-page':error,
            [Cell.name]: Cell,
            [Button.name]: Button,
            [DatetimePicker.name]: DatetimePicker,
            [Field.name]: Field,
            [Uploader.name]: Uploader,
            [Popup.name]: Popup,
            [Swipe.name]: Swipe,
            [SwipeItem.name]: SwipeItem
        },
        filters: {
        },
        data() {
            return {
                showLoading: false,
                loadingMsg:'',
                iserror:false,
                contactType: this.$store.state.app.contactType,
                istrue:  this.$store.state.app.istrue,
                proSubordinateTeamNum:  this.$store.state.app.proSubordinateTeamNum,
                propNewUser:this.$store.state.app.propNewUser,
                appealData: {},
                errorMessage:{
                    contact_type:false,
                    contact_account:false,
                    source_desc:false,
                    is_veteran:false,
                    with_lower:false,
                    lower_count:false,
                    daily_new:false,
                },

                iserrordata:false,
                iserrorDescLength:false,
                exa:{
                    source_desc:false,
                }
            }
        },
        created() {
        },
        mounted() {
        },
        watch:{
        },
        methods: {
            submitWorkOrder() {
                this.loadingMsg="正在提交中..."
                this.errorMessage=dataNullFilter(this.appealData,this.errorMessage,this);
                this.exa=dataDescLengthFilter(this.appealData,this.exa,this.errorMessage,this);
                this.$forceUpdate()
                if(this.iserrordata){
                    return;
                }
                else if(this.iserrorDescLength){
                    return;
                }else{
                    this.showLoading = true
                    submitWorkOrder({cooperation:JSON.stringify(this.appealData),type_id:5}).then(res => {
                        if (res.status === 0) {
                            const QuerySerch = location.search
                            location.href = `/success_cs${QuerySerch}`
                        }
                    }).catch(error =>{
                        this.showLoading = false
                        if(error.response.data.status==-400) {
                            this.iserror=true
                        }
                    })
                }
            },


        },
        beforeDestroy () {
        },
    }
</script>

